<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>New</title>
  <link rel="stylesheet" href="css/app.css">
  <!--link rel="stylesheet" href="css/bootstrap.css"-->
  <link rel="stylesheet" href="css/animations.css">
  <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
  <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    

  <!--script src="lib/jquery/jquery-1.10.2.js"></script-->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-animate.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="lib/angular/angular-route.js"></script>

  <script src="js/app.js"></script>
  <script src="js/animations.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
  <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
  <script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
    
</head>
<body>
  

  <h2>User List</h2>
  <div  ng-controller="UserListCtrl">
    <!-- <table>
      <tr>
        <td colspan="3"> Search: <input ng-model="query"></td>
      </tr>

      <tr ng-repeat="user in users | filter:query">
        <td><img ng-src={{user.avatar}}></td>
        <td>{{user.fname}}</td>
        <td>{{user.lname}}</td>
        <td>{{user.address}}</td>
      </tr>
    </table> -->
    <input ng-model="query">
    <table ng-table="tableParams" class="table">
        <thead>
            <tr>
                <th class="sortable" ng-class="{
                    'sort-asc': tableParams.isSortBy('fname', 'asc'),
                    'sort-desc': tableParams.isSortBy('fname', 'desc')
                  }"
                    ng-click="tableParams.sorting({'fname' : tableParams.isSortBy('fname', 'asc') ? 'desc' : 'asc'})" rowspan="2">
                    <div><i class="glyphicon glyphicon-user"></i> Name</div>
                </th>
                <th colspan="2" class="text-center">Data</th>
            </tr>
            <tr>
                <th>Address...</th>
                <th class="sortable" ng-class="{
                    'sort-asc': tableParams.isSortBy('email', 'asc'),
                    'sort-desc': tableParams.isSortBy('email', 'desc')
                  }"
                    ng-click="tableParams.sorting({'email' : tableParams.isSortBy('email', 'asc') ? 'desc' : 'asc'})">
                    <div>Email</div>
                </th>
                
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users | filter:query"">
                <td data-title="'Name'" width="200" sortable="'fname'">
                  <img ng-src={{user.avatar}}>  {{user.fname}} {{user.lname}}
                </td>
                <td data-title="'Address'" width="200">
                    {{user.address}}
                </td>
                <td data-title="'Email'" width="200"  sortable="'email'">
                    {{user.email}}
                </td>
            </tr>
        </tbody>
    </table>
  </div>

</body>
</html>
